<template>
  <div class="main_bg">

    <!-- 医生头部信息 -->
    <section>
      <div>
        <div>
          <img src="../../static/image/yisheng.png"/>
          <!-- <img :src="root + DOCTORIMAGEPATH | showHeadPic"/> -->
          <!-- <img :src="DOCTORIMAGEPATH | showHeadPic"/> -->
          <span>
            <mt-badge size="normal">{{DOCTORSTATUS}}</mt-badge>
          </span>
        </div>
        <div>
          <p><b>{{DOCTORNAME}}</b>{{DOCTORDEPARTMENT}}</p>
          <p>{{HOSPITALNAME}}</p>
          <p>{{DOCTORMAJOR}}</p>
          <p>
            <span>
              <i>
                <svg class="icon" style="" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" fill="#fff" xmlns:xlink="http://www.w3.org/1999/xlink" width="1rem"
                  height="1rem"
                ><defs><style type="text/css"></style></defs><path d="M214.60224 997.832a30.744 30.744 0 0 1-18.104-5.88 30.76 30.76 0 0 1-12.192-30.088l54.04-313.832L9.36224 425.768a30.736 30.736 0 0 1 17-52.48l316.576-45.84L484.49024 41.864c10.328-20.928 44.736-20.928 55.064 0L681.14624 327.448l316.56 45.84a30.736 30.736 0 0 1 17 52.48L785.71424 648.032l54.072 313.832a30.8 30.8 0 0 1-12.184 30.088 30.904 30.904 0 0 1-32.368 2.376L512.02624 846.096 228.85824 994.32a30.864 30.864 0 0 1-14.256 3.512zM512.02624 780.64c4.896 0 9.792 1.168 14.264 3.512l242.344 126.84-46.272-268.512a30.688 30.688 0 0 1 8.888-27.288l195.784-190.016-270.688-39.216a30.672 30.672 0 0 1-23.12-16.752L512.02624 124.744 390.85024 369.208a30.672 30.672 0 0 1-23.12 16.752l-270.704 39.208 195.784 190.016a30.728 30.728 0 0 1 8.888 27.288l-46.232 268.52L497.76224 784.16A30.712 30.712 0 0 1 512.02624 780.64z"></path></svg>
              </i>
              <label>收藏</label>
            </span>
            <!-- <span>{{'二维码'}}</span> -->
          </p>
        </div>
      </div>
      <div>
        <!-- <span>{{咨询}}</span><span>{{回头率}}</span><span>{{收藏}}</span> -->
      </div>
    </section>

    <!-- 医生简介  -->
    <section>
      <div>
        <div>
          <h6>医生介绍</h6>
          <label>{{showDoctorDetailButton}}</label>
          <!-- <mt-switch v-model="showDoctorDetail">展开</mt-switch> -->
        </div>
        <div>
          <span>{{DOCTORDETAIL}}</span>
        </div>
      </div>
    </section>

    <!-- 留言 -->
    <section>
      <div>
        <h6>留言</h6>
        <span>您可以立刻给医生留言</span>
        <mt-button type="primary" size="large" @click.native="leaveMessage()">留言</mt-button>
      </div>
    </section>

    <!-- 图方咨询 -->
    <!-- 在线聊天 -->
    <!-- 远程视频诊疗 -->
    <!-- 评价 -->
    <!-- 动态响应搜索列表 -->
  </div>
</template>

<script>
export default {
  data() {
    return {

      showDoctorDetailButton: '展开',
      showDoctorDetail: false,

      DOCTORSTATUS: '在线',
      DOCTORDETAIL: '暂无内容',
      DOCTORIMAGEPATH: '',
      DOCTORNAME: '医生名称',
      DOCTORDEPARTMENT: '医生级别',
      DOCTORMAJOR: '科室',
      HOSPITALNAME: '医院名称',

      ts: this.newStore(),
      tq: this.getData(),
      root: `https://${sessionStorage.getItem('hospitalDomainname')}/doctor`,

      jsonParams: {},

    };
  },
  created() {
    /* 创建页面参数 */
    document.title = '医生详情';

    /* 创建页面数据 */
    this.jsonParams = JSON.parse(this.$route.query.jsonParams);
    console.log(`传递过来的参数：${this.jsonParams}`);
    this.DOCTORNAME = `${this.jsonParams.DOCTORNAME}`;
    this.DOCTORDEPARTMENT = `${this.jsonParams.DOCTORDEPARTMENT}`;
    this.HOSPITALNAME = `${this.jsonParams.HOSPITAL}`;
    this.DOCTORIMAGEPATH = `${this.jsonParams.DOCTORIMAGEPATH}`;
    this.DOCTORMAJOR = `${this.jsonParams.DOCTORMAJOR}`;
    this.DOCTORDETAIL = `${this.jsonParams.GRJJ}`;
    
  },
  mounted() {
  },
  components: {
  },
  methods: {
    leaveMessage() {
      console.log('------点击留言-------');
      this.$router.push({
        name: 'doctor-curePatient', query: { jsonParams: `${this.$route.query.jsonParams}` },
      });
    },
  },
  watch: {
  },
  filters: {
    /*
    showHeadPic(value) {
      if (!value || value == '' || value == 'null' || value == undefined) return '../images/dochead.jpg';
      return `${value}`;
    }, */
    showHeadPic(value) {
      if (!value || value == '' || value == 'null' || value == undefined) return '../images/dochead.jpg';/* '../../static/images/dochead.jpg' */
      return `https://${sessionStorage.getItem('hospitalDomainname')}/doctor${value}`;
    },

  },
};
</script>

<style scoped lang="stylus">
.main_bg
  display flex
  flex-flow column || nowrap
  justify-content center
  /* border-bottom 1px solid #f1f1f1 */
  height 100%
  width 100%
  /* background-color #f8f9fa */
  font-size .8rem
  h6
    font-size 1rem
    font-weight bold
  letter-spacing .05rem /* 字间距 */
  section
    display inline-flex /* 没有这个，后面所有的justify-content和align-content无法使用 */
    flex-flow row || nowrap
    width 100%
    background-color #fff
    margin-bottom 1.3rem
    justify-content flex-start
    border-bottom 0px solid #f1f1f1
    /* -webkit-box-shadow:0px 1px 1px #c8c8c8 ;    阴影 */
    /* -moz-box-shadow:0px 1px 1px #c8c8c8 ; */
    /* box-shadow:0px 1px 1px #c8c8c8 ; */
    padding .5rem
    &:first-child   /* 医生信息 */
        background-color #26a2ff
        height 9rem
        -webkit-box-shadow:0px 3px 3px #c8c8c8 ;
        -moz-box-shadow:0px 3px 3px #c8c8c8 ;
        box-shadow:0px 3px 3px #c8c8c8 ;
        div
            display inline-flex
            flex-flow column || wrap
            justify-content flex-start
            width 80%
            &:first-child   /* 医生信息：头像、名称、收藏。。 */
                flex-flow row || wrap
                align-items center
                justify-content flex-start
                height 100%
                div
                    &:first-child   /* 头像 */
                        flex-flow column || wrap
                        justify-content center
                        /* background-color #000 */
                        margin-right .5rem
                        img
                            width 5.5rem
                            height 5.5rem
                            border-radius 50%
                            /* border 1px solid #fff */
                            margin-top -.5rem
                        span
                            margin-top -1.1rem
                            margin-right -1.4rem
                    &:last-child    /* 名称等信息 */
                        flex-flow column || wrap
                        justify-content flex-start
                        align-items flex-start
                        width 16rem
                        font-size .8rem
                        p
                            color #e9ecef
                            margin-bottom .2rem
                            &:first-child
                                margin-bottom .5rem
                                b
                                    color #fff
                                    font-size 1rem  /* 医生名称 */
                                    margin-right .5rem
                            &:last-child
                                margin-top .3rem
                                span    /* 收藏按扭 */
                                    display inline-flex
                                    justify-content center
                                    align-items center
                                    opacity 1
                                    background-color rgba(255,255,255,.2)
                                    width 4.8rem
                                    height 1.85rem
                                    border-radius 4px
                                    label
                                        /* margin-bottom .1rem */
                                        margin-left .5rem
                                        color rgba(255,255,255,1)
                                        font-size .7rem
            &:last-child    /* 咨询、回复率、等 */
                text-align center
    &:nth-child(2)   /* 医生介绍 */
        display inline-flex
        flex-flow column || nowrap
        justify-content center
        div
            div
                &:first-child /* 医生介绍 */
                    display flex
                    height 2rem
                    flex-flow row || nowrap
                    justify-content space-between
                    align-items center
                    label /* 展开 */
                        font-size .8rem
                        color #26a2ff
                &:last-child
                    display flex
                    flex-flow row || wrap
                    justify-content center
                    align-items center
                    span
                        font-size .8rem
                        color #666
    &:last-child   /* 留言 */
        border-bottom 0px solid #f1f1f1
        display inline-flex
        flex-flow column || nowrap
        justify-content center
        div
            span  /* 留言提示 */
                color #666
                display inline-block
                margin .8rem 0
.mint-button {  /* 大按扭的样式 */
  /* display: -webkit-inline-box; */
  width: 95%;
  margin: auto;
}
.mint-badge.is-primary {
  background-color: #fff;
}
.mint-badge {
  color: #26a2ff;
  width: 3rem;
}
.mint-badge.is-size-normal {
  font-size: 8px;!imporment
}
</style>
